<template>
  <div class="ratings">
    <scroll>
      <div class="content">
        <div class="overview">
          <div class="overview-left">
            <h1 class="score">{{sellerData.score}}</h1>
            <div class="title">综合评分</div>
            <div class="rank">高于周边商家{{sellerData.rankRate}}%</div>
          </div>
          <div class="overview-right">
            <div class="score-warpper">
              <span class="title">服务态度</span>
              <star :size="36" :score="sellerData.serviceScore"></star>
              <span class="score">{{sellerData.serviceScore}}</span>
            </div>
            <div class="score-warpper">
              <span class="title">食物评分</span>
              <star :size="36" :score="sellerData.foodScore"></star>
              <span class="score">{{sellerData.foodScore}}</span>
            </div>
            <div class="delivery-warpper">
              <span class="title">送达时间</span>
              <span class="time">{{sellerData.deliveryTime}}分钟</span>
            </div>
          </div>
        </div>
        <split></split>
        <ratingSelect
          :selectType="selectType"
          :onlyContent="onlyContent"
          :desc="desc"
          :ratings="ratingsData"
          @ratingTypeSelect="ratingTypeSelect"
          @onlyContentSelect="onlyContentSelect"
          ref="rating"
        >
          <div class="rating-wrapper">
            <ul>
              <li
                v-for="rating in ratingsData"
                :key="rating.rateTime"
                class="rating-item"
                v-show="needShow(rating.rateType,rating.text)"
              >
                <div class="avatar">
                  <img :src="rating.avatar" width="28" height="28" />
                </div>
                <div class="content">
                  <h1 class="name">{{rating.username}}</h1>
                  <div class="star-wrapper">
                    <star :size="24" :score="rating.score"></star>
                    <span class="delivery" v-show="rating.deliveryTime">{{rating.deliveryTime}}分钟送达</span>
                  </div>
                  <p class="text">{{rating.text}}</p>
                  <div class="recommend" v-show="rating.recommend && rating.recommend.length">
                    <span class="icon-thumb_up"></span>
                    <span
                      v-for="(recommend,index) in rating.recommend"
                      :key="index"
                      class="item"
                    >{{recommend}}</span>
                  </div>
                  <div class="time">{{formatDate(rating.rateTime)}}</div>
                </div>
              </li>
            </ul>
          </div>
        </ratingSelect>
      </div>
    </scroll>
  </div>
</template>

<script>
import scroll from "../../components/common/scroll/scroll";
import { sellerData, ratingsData } from "../../network/ratings";
import star from "../../components/content/star/star";
import split from "../../components/content/split/split";
import ratingSelect from "../../components/content/ratingSelect/ratingSelect";
import { formatDate } from "../../common/js/date";
const POSITIVE = 0;
const NEGATIVE = 1;
const ALL = 2;

export default {
  name: "ratings",
  data() {
    return {
      sellerData: {},
      ratingsData: [],
      selectType: ALL,
      onlyContent: false,
      desc: {
        all: "全部",
        positive: "推荐",
        negative: "吐槽"
      }
    };
  },
  components: {
    scroll,
    star,
    split,
    ratingSelect
  },
  methods: {
    needShow(rateType, text) {
      return this.$refs.rating.needShow(rateType, text);
    },

    ratingTypeSelect(type) {
      this.selectType = type;
    },
    onlyContentSelect(onlyContent) {
      this.onlyContent = !this.onlyContent;
    },
    formatDate(time) {
      let date = new Date(time);
      return formatDate(date, "yyyy-MM-dd hh:mm");
    }
  },
  filters: {
    forMatDate(time) {
      let date = new Date(time);
      return formatDate(date, "yyyy-mm-dd hh:mm");
    }
  },
  created() {
    sellerData().then(res => {
      this.sellerData = res.data;
    });
    ratingsData().then(res => {
      this.ratingsData = res.data;
    });
  }
};
</script>

<style lang='stylus' scpoed>
.ratings
  position: absolute
  top: 175px
  left: 0
  bottom: 0
  width: 100%
  overflow: hidden
  .wrapper
    height: 100%
  .overview
    display: flex
    padding: 18px 0
    .overview-left
      flex: 0 0 130px
      padding: 6px 0
      width: 130px
      border-right: 1px solid rgba(7, 17, 27, 0.1)
      text-align: center
      @media screen and (max-width: 320px)
        flex: 0 0 70px
        width: 70px
      .score
        margin-bottom: 6px
        line-height: 28px
        font-size: 24px
        color: rgb(255, 153, 0)
      .title
        line-height: 12px
        font-size: 12px
        color: rgb(7, 17, 27)
        margin-bottom: 8px
      .rank
        line-height: 10px
        font-size: 10px
        color: rgb(147, 153, 159)
        @media screen and (max-width: 320px)
          line-height: 12px
          font-size: 8px
    .overview-right
      flex: 1
      padding: 6px 0 6px 12px
      .score-warpper
        font-size: 0
        margin-bottom: 8px
        .title
          display: inline-block
          vertical-align: top
          line-height: 18px
          font-size: 10px
          color: rgb(7, 17, 27)
        .star
          display: inline-block
          vertical-align: top
          margin: 0 6px
        .score
          display: inline-block
          vertical-align: top
          line-height: 18px
          font-size: 12px
          color: rgb(253, 153, 0)
      .delivery-warpper
        font-size: 0
        .title
          line-height: 18px
          font-size: 12px
          color: rgb(7, 17, 27)
        .time
          margin-left: 12px
          line-height: 18px
          font-size: 10px
          color: rgb(147, 153, 159)
  .rating-wrapper
    padding: 0 18px
    .rating-item
      display: flex
      padding: 18px 0
      border-bottom: 1px solid rgba(7, 17, 27, 0.1)
      .avatar
        flex: 0 0 28px
        width: 28px
        margin-right: 12px
        img
          border-radius: 50%
      .content
        position: relative
        flex: 1
        .username
          font-size: 10px
          line-height: 12px
          color: rgb(7, 17, 27)
          margin-bottom: 4px
        .star-wrapper
          margin-bottom: 6px
          font-size: 0px
          .star
            display: inline-block
            vertical-align: top
            margin-right: 6px
          .delivery
            display: inline-block
            vertical-align: top
            font-size: 10px
            line-height: 10px
            font-weight: 200
            color: rgb(147, 153, 159)
        .text
          margin-bottom: 8px
          line-height: 18px
          font-size: 12px
          color: rgb(7, 17, 27)
        .recommend
          line-height: 16px
          .icon-thumb_up, .item
            display: inline-block
            margin: 0 4px 2px 0
            font-size: 9px
          .icon-thumb_up
            color: rgb(0, 160, 220)
          .item
            padding: 0 3px
            border-radius: 1px
            border: 1px solid rgba(7, 17, 27, 0.2)
            background-color: #fff
        .time
          position: absolute
          top: 0
          right: 0
          font-size: 10px
          color: rgb(147, 153, 159)
</style>